<template>
  <div class="message">
    <el-tabs type="border-card">
      <el-tab-pane label="我的信息">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-position="right"
          label-width="110px">
          <el-form-item label="*用户账号:">
            <el-input v-model="formInline.nickname"></el-input>
          </el-form-item>

          <el-form-item label="*用户名称:">
            <el-input v-model="formInline.username"></el-input>
          </el-form-item><br /><br />

          <el-form-item label="*性别:">
            <el-input v-model="formInline.sex"></el-input>
          </el-form-item>

          <el-form-item label="*类型:">
            <el-input v-model="formInline.type">
            </el-input> </el-form-item><br /><br />

          <el-form-item label="*联系电话:">
            <el-input v-model="formInline.phone"></el-input>
          </el-form-item>

          <el-form-item label="*邮箱:">
            <el-input v-model="formInline.email"></el-input>
          </el-form-item><br /><br />

          <el-form-item label="*生效时间:">
            <el-date-picker v-model="formInline.createtime" type="date">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="*详细住址:">
            <el-input v-model="formInline.homeaddress"></el-input>
          </el-form-item><br /><br />

          <el-form-item label="*我的车位:">
            <el-input v-model="formInline.parkname"></el-input>
          </el-form-item>

          <el-form-item label="*计费状态:">
            <el-input v-model="formInline.coststatus"></el-input>
          </el-form-item><br /><br />

          <el-form-item label="*我的描述:">
            <el-input type="textarea" v-model="formInline.note"></el-input>
          </el-form-item><br />
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <h4>头像信息/更换</h4>
    <div class="foot">
      <i class="photo">
        <img :src="imgs + this.formInline.icon" alt="" />
      </i>
      <el-upload class="avatar-uploader" :action="'http://community.byesame.com/users/updateIcon?token=' + this.token"
        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      token: sessionStorage.getItem("token"),
      imageUrl: '',
      imgs: "http://community.byesame.com/file/",
      formInline: {
        nickname: "",
        username: "",
        sex: "",
        type: "",
        phone: "",
        email: "",
        createtime: "",
        homeaddress: "",
        parkname: "",
        coststatus: "",
        note: "",
        icon: "",
      },
    };
  },
  methods: {
    handeleImg() {
      this.$axiosToken({
        url: "/users/getUserByToken",
        method: "get",
        data: {
        },
        success: (result) => {
          this.formInline.icon = result.head
        },

      });
    },
    handleMyid() {
      this.$axiosToken({
        url: "/users/getMyId",
        method: "post",
        data: {
          id: "",
        },
        success: (result) => {
          (this.formInline.nickname = result[0].nickname),
            (this.formInline.username = result[0].username),
            (this.formInline.sex = result[0].sex);
          if (result[0].coststatus == 1) {
            this.formInline.coststatus = "已缴费";
          } else if (result[0].coststatus == 2) {
            this.formInline.coststatus = "未缴费";
          }

          if (result[0].phone) {
            this.formInline.phone = result[0].phone;
          } else {
            this.formInline.phone = "暂无";
          }

          this.formInline.email = result[0].email;
          if (result[0].createtime) {
            this.formInline.createtime = result[0].createtime.substring(0, 10);
          }

          (this.formInline.homeaddress = result[0].homeaddress),
            (this.formInline.parkname = result[0].parkname);
          if (result[0].type == 1) {
            this.formInline.type = "管理员";
          } else {
            this.formInline.type = "普通用户";
          }
          (this.formInline.parkstatus = result[0].parkstatus),
            (this.formInline.note = result[0].note);
          this.formInline.icon =
            "http://community.byesame.com/file/" + result[0].icon;
        },
      });
    },
    //换头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message({
        type: 'success',
        message: '更换头像成功,重新登录即可查看'
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;

    }
  },
  mounted() {
    this.handleMyid();
    this.handeleImg();
  },
};
</script>
<style lang="scss" scoped>
.message::v-deep {
  .el-form {
    .el-form-item {
      margin-right: unset;
      width: 50%;

      &:nth-child(21) {
        display: block;
        width: 100%;

        .el-form-item__content {
          width: 90%;
        }
      }
    }

    .el-form-item--small {
      .el-form-item__content {
        width: 80%;

        .el-input {
          width: 100%;
        }
      }

    }
  }

  //头像上传
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-tab-pane {
    padding: 40px 40px 0;
    // box-shadow: 0 0 5px 3px #ccc;
  }

  h4 {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .foot {
    border: 1px solid #ebeef5;
    display: flex;
    flex-direction: row;
    padding: 30px;
    height: 300px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    // background: red;
    .photo {
      display: block;
      width: 250px;
      height: 250px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>